<template>
	<view class="page">
		<view style="display: flex;align-items: center;justify-content: center;width: 750rpx;height: 400rpx;">
			<avatar expWidth="80px" expHeight="80px" selWidth="240px" stretch="short" selHeight="240px"
				@upload="myUploads" :canRotate="false" :inner="true"
				:avatarSrc="filePath||member.avatar||defUserPic"
				avatarStyle="width: 250upx; height: 250upx; border-radius: 125upx;">
			</avatar>
		</view>

		<view class="block">
			<view class="my-tab">
				<view class="tab-name">昵称</view>
				<view class="flex-SB" @click="setName">
					<view class="tab-content">{{member.nickname||'-'}}</view>
					<u-icon name="arrow-right" color="#ccc"></u-icon>
				</view>

			</view>
			<view class="my-tab">
				<view class="tab-name">性别</view>
				<view class="flex-SB" @click="gendershow = true">
					<view class="tab-content">{{member.gender||'-'}}</view>
					<u-icon name="arrow-right" color="#ccc"></u-icon>
				</view>
			</view>
			<view class="my-tab">
				<view class="tab-name">出生日期</view>
				<view class="flex-SB" @click="show = true">
					<view class="tab-content">{{member.birthday||'-'}}</view>
					<u-icon name="arrow-right" color="#ccc"></u-icon>
				</view>
			</view>
		</view>
		<u-datetime-picker :maxDate="maxDate" :minDate="-200000000" @cancel="show = false" @confirm="selectTiem"
			ref="datetimePicker" :show="show" v-model="birthday" mode="date"></u-datetime-picker>
		<u-action-sheet @close="gendershow = false" @select="selectClick" :actions="geders" title="性别"
			:show="gendershow"></u-action-sheet>
	</view>
</template>

<script>
	import avatar from "@/pagesA/components/yq-avatar.vue";
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			avatar
		},
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				geders: [{
						name: '男'
					},
					{
						name: '女'
					}
				],
				gendershow: false,
				maxDate: new Date().getTime(),
				birthday: new Date().getTime(),
				show: false,
				filePath: '',
				defUserPic:'https://baxztech.com/bian_admin_api/public/bianmp/user-pic.png'
			};
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			chooseImg(){
				uni.chooseMedia({
				  count: 1,
				  mediaType: ['image'],
				  sourceType: ['album', 'camera'],
				  camera: 'back',
				  success:(res)=> {
					wx.cropImage({
						src:res.tempFiles[0].tempFilePath,
						cropScale:'1:1',
						success:(tf)=>{
							console.log(tf);
							this.myUpload(tf.tempFilePath)
						}
					})
				  }
				})
			},
			handleCrop(e) {
				uni.previewImage({
					urls: [e.tempFilePath],
					current: 0
				});
			},
			myUpload(path) {
				let fm = uni.getFileSystemManager()
				let res = fm.readFileSync(path, "base64");
				this.filePath = "data:image/jpeg;base64," + res;
				this.member.avatar = this.filePath;
				this.save();
			},
			myUploads(rst) {
				let fm = uni.getFileSystemManager()
				let res = fm.readFileSync(rst.path, "base64");
				this.filePath = "data:image/jpeg;base64," + res;
				this.member.avatar = this.filePath;
				this.save();
			},
			save() {
				const {
					birthday,
					gender,
					nickname,
					phone,
					avatar
				} = this.member;
				uni.$u.http.post('/client/update_userinfo', {
					birthday,
					gender,
					nickname,
					phone,
					avatar
				}).then(res => {
					if (res.status == 200) {
						this.$store.commit('SET_MEMBER', this.member)
						uni.setStorageSync('MEMBER', this.member)
						this.$toast("修改成功！")
					} else {
						this.$toast("网络错误，请重试！")
					}

				});
			},
			setName() {
				uni.showModal({
					title: "昵称",
					editable: true,
					success: (e) => {
						if (e.confirm && e.content) {
							this.member.nickname = e.content;
							this.save();
						}
					}
				})
			},
			selectClick(index) {
				this.member.gender = index.name;
				this.save();
			},
			selectTiem(e) {
				this.show = false;
				this.member.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.save();
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.block {
		width: 660rpx;
	}

	.my-tab {
		margin: 10rpx auto;
		display: flex;
		justify-content: space-between;
		position: relative;
		padding: 0 20rpx;
	}

	.tab-name,
	.tab-content {
		height: 92rpx;
		line-height: 92rpx;
		font-size: 28rpx;
		color: #2E2E2E;
		font-weight: bold;
	}

	.tab-content {
		color: #999;
		margin-right: 20rpx;
	}
</style>